<!--  在选择职业之后的新的已知主页 -->
<template>
	<view class="newYiZhiIndexPage">
		<view class="interest-content">
			<view style="margin-top: 20rpx">
				<u-loading-icon v-if="loading" status="loading" :size="48" text="正在加载..." textSize="32" />
			</view>
			<u-empty v-if="!loading && list.length <= 0" mode="data" width="400rpx" marginTop="20rpx"
				icon="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/interest/empty.png" text="没有数据哦~">
			</u-empty>
			<view class="" v-if="!loading && list.length > 0">
				<view class="itt-content-boxs" v-for="(series, index) in list" :key="index">
					<view class="ceshi_button" v-if="series.type == 2" @click="goImprove(series)">
						<img src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/ceshi_button_icon.png" alt="">
						{{ series.name }}
					</view>
					<template v-else>
						<view class="head">
							<h3 class="title">
								<span>{{ series.name }}</span>
							</h3>
							<view class="percentage_div">
								<u-line-progress class="itt-line-progress"
									:activeColor="series.pace < 60 ? '#F7FCFE' : '##96ABDC'" :percentage="series.pace"
									:height="16">
									<text class="u-percentage-slot">.</text>
								</u-line-progress>
								<view :class="
			          series.pace < 60
			            ? 'u-percentage-numer'
			            : 'u-percentage-numer u-percentage-numer-color'
			        ">
									{{ series.pace && series.pace.toFixed(2) }}%
								</view>
							</view>
						</view>
						<scroll-view scroll-x="true" class="list_content">
							<view class="list_ul">
								<courseSeriesCardV2 v-for="(item, idn) in series.courseListVos" :key="idn" :item="item"
									@goDetail="toCourseInfo(item)" />
							</view>
						</scroll-view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberLabel,
		getYzHome
	} from "../../apis/apis.js";
	import courseSeriesCardV2 from "../wx_subpack/courseSeriesCardV2.vue";
	export default {
		components: {
			courseSeriesCardV2,
		},
		data() {
			return {
				loading: false,
				list: [],
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			// 去随堂测试
			goImprove(item) {
				const {
					testId
				} = item;
				if (testId == null || !testId) {
					uni.showToast({
						title: '没有相关测试题',
						icon: 'none',
						duration: 2000,

					});
					return false;
				}
				uni.navigateTo({
					url: `/pages/index/improve/improve?id=${testId}`
				})
			},
			getList() {
				// 参数名：type   数据类型（1：行业岗位标签，2：兴趣分类标签）
				getYzHome({
					type: 1
				}).then((res) => {
					this.list = res.data || res.rows || [];
					this.loading = false;
					console.log(this.list);
				});
			},
			// 去系列详情
			toCourseInfo(item) {
				const {id,courseResourceIds} = item;
				uni.navigateTo({
					url: `/pages/index/courseList/courseList?seriesId=${item.id}&courseResourceIds=${courseResourceIds}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.newYiZhiIndexPage {
		transform: translateY(-40rpx);
		border-radius: 0rpx 0rpx 0 0;

		.interest-content {
			width: 100%;
			min-height: calc(100vh - 590rpx);
			background-color: #f5f5f5;
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0 0;
			position: relative;
		}

		.itt-content-boxs {
			padding-left: 80rpx;
			margin-bottom: 40rpx;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				width: 61rpx;
				height: 61rpx;
				background: url("https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/newIcon/DecorationDotSmall.png") no-repeat;
				background-size: cover;
				left: 0rpx;
				top: 0rpx;
				z-index: 11;
			}

			&::before {
				content: "";
				position: absolute;
				height: 100%;
				width: 4rpx;
				background: rgba(188, 211, 237, 0.5);
				left: 30rpx;
				top: 45rpx;
			}

			&:last-child {
				&::before {
					display: none;
				}
			}

			.ceshi_button {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0 25rpx;
				height: 60rpx;
				border-radius: 16rpx;
				background: #369CFE;
				font-size: 28rpx;
				font-weight: 500;
				color: #fff;
				font-weight: normal;
				box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(52, 144, 233, 0.3), 0rpx -2rpx 7rpx 0rpx rgba(54, 156, 254, 0.3);
				margin-bottom: 20rpx;

				&>img {
					height: 24rpx;
					width: 24rpx;
					margin-right: 7rpx;
				}
			}

			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					padding: 0 10rpx;
					font-weight: bold;
					display: inline-flex;
					align-items: flex-end;
					justify-content: center;
					margin-right: 0rpx;
					white-space: nowrap;
					transform: translateY(10rpx);
					height: 20rpx;
					background-image: linear-gradient(90deg, #F7FCFE, #96ABDC);
					overflow: visible !important;
					padding-bottom: 5rpx;
					font-size: 30rpx;
				}

				.percentage_div {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.itt-line-progress {
						display: inline-block;
						margin-right: 0rpx;
						flex: 1;
						width: 100%;
					}

					.u-percentage-numer {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #ff9f5f;
						line-height: 46rpx;
						text-align: right;
						display: inline-block;
						margin-left: 20rpx;
					}

					.u-percentage-slot {
						display: inline-block;
						width: 10rpx;
						height: 10rpx;
						background-color: #ffffff;
						margin-right: 10rpx;
						border-radius: 50%;
					}

					.u-percentage-numer-color {
						color: #194FC9;
					}
				}
			}
		}
	}

	.list_content {


		.list_ul {
			padding: 20rpx 0 0rpx 0rpx;
			display: flex;
			flex-wrap: nowrap;
			
		}
	}
</style>
